<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import SongItem from '@/components/SongItem.vue'
import { Male, Female, Edit, InfoFilled } from '@element-plus/icons-vue'
import { usePlayerStore, useMusicStore, useUserProfileStore } from '@/store'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { baseURL } from '@/utils/request'
// 使用 store
const playerStore = usePlayerStore()
const musicStore = useMusicStore()
const userProfileStore = useUserProfileStore()
const router = useRouter()

// 从 store 获取用户信息和加载状态
const loading = computed(() => userProfileStore.loading)

// 喜欢的歌曲列表
const likedSongs = computed(() => musicStore.likedMusic)

// 当前正在播放的歌曲ID
const currentPlayingId = ref(null)

// 默认头像处理
const userAvatar = computed(() => {
  const userData = userProfileStore.userInfo
  if (userData?.avatarUrl) {
    return `${baseURL}${userData?.avatarUrl}`
  } else {
    return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  }
})

// 用户信息的计算属性，方便在模板中使用
const userInfo = computed(() => userProfileStore.userInfo)

// 获取用户信息
const fetchUserInfo = async () => {
  await userProfileStore.fetchUserInfo()
}

// 获取喜欢的音乐列表
const fetchLikedSongs = async () => {
  await musicStore.fetchAllMusic()
  if (musicStore.likedMusic.length > 0) {
    // 更新播放列表
    playerStore.setPlaylist(musicStore.likedMusic)
  }
}

// 处理编辑个人资料
const handleEditProfile = () => {
  router.push('/user/edit')
}

// 处理播放/暂停
const handlePlay = ({ id, playing }) => {
  if (playing) {
    // 找到要播放的歌曲
    const songToPlay = likedSongs.value.find(song => song.id === id)
    if (songToPlay) {
      // 更新到播放器状态
      playerStore.playSong({
        songId: songToPlay.id,
        songName: songToPlay.title,
        artist: songToPlay.artist,
        coverUrl: songToPlay.coverUrl,
        musicUrl: songToPlay.musicUrl,
        album: songToPlay.album,
        isLiked: songToPlay.isFavorite === 1
      })
    }
  } else {
    // 暂停当前播放的歌曲
    playerStore.togglePlay()
  }
}

// 当用户信息突然没有时，重新登录
watch(userInfo, () => {
  if (userInfo.value === null) {
    ElMessage.error('用户信息获取失败，请重新登录')
    router.push('/login')
  }
})

onMounted(() => {
  fetchUserInfo()
  fetchLikedSongs()
})
</script>

<template>
  <div class="user">
    <!-- 加载状态 -->
    <template v-if="loading">
      <div class="loading-container">
        <el-skeleton animated>
          <template #template>
            <div class="user-profile">
              <div class="user-header">
                <!-- 头像骨架 -->
                <div class="avatar-area">
                  <el-skeleton-item variant="circle" style="width: 150px; height: 150px"/>
                </div>
                
                <!-- 用户信息骨架 -->
                <div class="user-info">
                  <div class="user-name-area">
                    <el-skeleton-item variant="h3" style="width: 150px; margin-bottom: 15px"/>
                    <el-skeleton-item variant="text" style="width: 200px"/>
                  </div>
                  
                  <div class="user-stats">
                    <el-skeleton-item variant="text" style="width: 100px; margin-right: 20px"/>
                    <el-skeleton-item variant="text" style="width: 100px; margin-right: 20px"/>
                    <el-skeleton-item variant="text" style="width: 100px"/>
                  </div>
                  
                  <div class="user-location">
                    <el-skeleton-item variant="text" style="width: 150px"/>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
        
        <!-- 音乐列表骨架 -->
        <div class="music-history" style="margin-top: 30px">
          <el-skeleton :rows="5" animated/>
        </div>
      </div>
    </template>

    <!-- 实际内容 -->
    <template v-else>
      <!-- 检查是否有子路由 -->
      <router-view v-if="$route.path !== '/user'"></router-view>
      
      <!-- 用户主页内容，当没有子路由时显示 -->
      <div v-else>
        <div class="user-profile">
          <div class="user-header">
            <div class="avatar-area">
              <el-avatar :src="userAvatar" :size="150"></el-avatar>
            </div>
            <div class="user-info">
              <div class="user-name-area">
                <h2 class="user-name">{{ userInfo?.username || '' }}</h2>
                <div class="user-tags">
                  <span class="vip-tag">VIP·3</span>
                  <span class="level-tag">Lv.10</span>
                  <span class="gender" :class="userInfo?.gender === 1 ? 'male' : 'female'">
                    <el-icon v-if="userInfo?.gender === 1"><male /></el-icon>
                    <el-icon v-else><female /></el-icon>
                  </span>
                </div>
                <el-button class="edit-btn" size="small" plain @click="handleEditProfile">
                  <el-icon><edit /></el-icon>
                  编辑个人资料
                </el-button>
              </div>
              
              <div class="user-stats">
                <div class="stat-item">
                  <div class="stat-num">0</div>
                  <div class="stat-label">动态</div>
                </div>
                <div class="stat-item">
                  <div class="stat-num">0</div>
                  <div class="stat-label">关注</div>
                </div>
                <div class="stat-item">
                  <div class="stat-num">0</div>
                  <div class="stat-label">粉丝</div>
                </div>
              </div>
              
              <div class="user-location">
                <span class="label">所在地区：</span>
                <span>{{ userInfo?.location || '未设置' }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="music-history">
          <div class="section-header">
            <h3>我喜欢的音乐</h3>
            <span class="song-count">已收藏 {{ likedSongs.length }} 首歌曲</span>
            <span class="info-icon">
              <el-icon><info-filled /></el-icon>
            </span>
          </div>
          
          <!-- 添加空状态显示 -->
          <div v-if="likedSongs.length === 0" class="empty-state">
            <div class="empty-icon">
              <i class="el-icon-heart"></i>
            </div>
            <p class="empty-text">暂无收藏的音乐</p>
            <p class="empty-subtext">去发现喜欢的音乐，添加到你的收藏吧</p>
            <el-button type="primary" class="netease-red-btn" style="width: 116px;" @click="router.push('/')">
              去发现音乐
            </el-button>
          </div>
          
          <!-- 有数据时显示歌曲列表 -->
          <div v-else class="song-list">
            <SongItem 
              v-for="(song, index) in likedSongs" 
              :key="song.id"
              :rank="index + 1"
              :songName="song.title"
              :artist="song.artist"
              :isLiked="song.isFavorite === 1"
              :songId="song.id"
              :album="song.album"
              :duration="song.duration"
              :coverUrl="song.coverUrl"
              :musicUrl="song.musicUrl"
              :currentPlayingId="currentPlayingId"
              @play="handlePlay"
            />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.user {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 90px;
}

.user-profile {
  margin-bottom: 30px;
}

.user-header {
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.avatar-area {
  margin-right: 30px;
}

.user-info {
  flex: 1;
}

.user-name-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-name {
  font-size: 22px;
  font-weight: bold;
  margin-right: 15px;
  margin-bottom: 0;
}

.user-tags {
  display: flex;
  align-items: center;
}

.vip-tag {
  background-color: #000;
  color: #e5c787;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 8px;
}

.level-tag {
  background-color: #f5f5f5;
  color: #c20c0c;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 8px;
}

.gender {
  font-size: 16px;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.male {
  color: #26a6e4;
}

.female {
  color: #ff70b4;
}

.edit-btn {
  margin-left: auto;
  border-radius: 20px;
  font-size: 12px;
  padding: 6px 15px;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.edit-btn:hover {
  background-color: var(--primary-bg);
}

.edit-btn .el-icon {
  margin-right: 4px;
  font-size: 12px;
}

.user-stats {
  display: flex;
  margin-bottom: 15px;
}

.stat-item {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid #eee;
}

.stat-item:first-child {
  padding-left: 0;
}

.stat-item:last-child {
  border-right: none;
}

.stat-num {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.user-location {
  margin-bottom: 10px;
  color: #666;
  font-size: 13px;
}

.label {
  color: #999;
}

.music-history {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-header h3 {
  font-size: 20px;
  margin: 0;
  margin-right: 10px;
}

.song-count {
  color: #999;
  font-size: 13px;
  margin-right: 5px;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ddd;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.info-icon .el-icon {
  font-size: 12px;
}

/* 添加加载状态样式 */
.loading-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.loading-container :deep(.el-skeleton__item) {
  background: rgba(190, 190, 190, 0.2);
}

.loading-container :deep(.el-skeleton__paragraph) {
  padding: 0 20px;
}

/* 添加空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  margin-top: 10px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: #d9d9d9;
}

.empty-icon i {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d9d9d9"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2.01 8.5 2.01 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.empty-text {
  font-size: 18px;
  color: #666;
  margin: 5px 0;
}

.empty-subtext {
  font-size: 14px;
  color: #999;
  margin: 0 0 20px 0;
}

.netease-red-btn {
  background-color: #c20c0c;
  border-color: #c20c0c;
  color: #fff;
}

.netease-red-btn:hover {
  background-color: #d33a3a;
  border-color: #d33a3a;
}

.song-list {
  background-color: #fff;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .user-profile {
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .user-header {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .avatar-area {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .user-info {
    width: 100%;
    align-items: center;
  }
  
  .user-name-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .user-name {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .edit-btn {
    margin-left: 0;
    margin-top: 15px;
  }
  
  .user-tags {
    justify-content: center;
    margin-bottom: 15px;
  }
  
  .user-stats {
    justify-content: center;
    width: 100%;
  }
  
  .stat-item {
    padding: 0 10px;
  }
  
  .user-location {
    text-align: center;
    margin-top: 15px;
  }
}
</style> 